@import "./modal";

@include aui-modal-create-modal();

.aui-modal-animated-in {
    animation: aui-modal-totop-in .5s ease;
}

.aui-modal-animated-out {
    animation: aui-modal-totop-out .5s ease forwards;
}


@keyframes aui-modal-totop-in {
    0% {
        transform: translate3d(0, -100%, 0);
        opacity: 0;
    }
    100% {
        transform: translate3d(0, 30px, 0);
        opacity: 1;
    }  
}

@keyframes aui-modal-totop-out {
    0% {
        transform: translate3d(0, 30px, 0);
        opacity: 1;
    }
    100% {
        transform: translate3d(0, -100%, 0);
        opacity: 0;
    }  
}

.aui-modal--action {
    .aui-modal-content { 
        top: 100%;
        transform: translate3d(0, -100%, 0);
    }

    .aui-modal-animated-in {
        animation: aui-modal-fromtop-in .5s ease;
    }
    
    .aui-modal-animated-out {
        animation: aui-modal-fromtop-out .5s ease forwards;
    }
}

@keyframes aui-modal-fromtop-in {
    0% {
        transform: translate3d(0, 0, 0);
        opacity: 0;
    }
    100% {
        transform: translate3d(0, -100%, 0);
        opacity: 1;
    }  
}

@keyframes aui-modal-fromtop-out {
    0% {
        transform: translate3d(0, -100%, 0);
        opacity: 1;
    }
    100% {
        transform: translate3d(0, 0, 0);
        opacity: 0;
    }  
}

@include aui-query-media-between("", "md") {   
    .aui-modal {
        &--action {
            .aui-modal-content {
                width: 100%;
            }
        }
    }
}

.aui-modal--aside {
    .aui-modal-content { 
        left: 0;
        transform: translate3d(0, 0, 0);
        height: 100%;
    }

    .aui-modal-animated-in {
        animation: aui-modal-fromleft-in .5s ease;
    }
    
    .aui-modal-animated-out {
        animation: aui-modal-fromleft-out .5s ease forwards;
    }
}

@keyframes aui-modal-fromleft-in {
    0% {
        transform: translate3d(-100%, 0, 0);
        opacity: 0;
    }
    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }  
}

@keyframes aui-modal-fromleft-out {
    0% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
    100% {
        transform: translate3d(-100%, 0, 0);
        opacity: 0;
    }  
}

@include aui-query-media-between("", "md") {   
    .aui-modal {
        &--aside {
            .aui-modal-content {
                width: 70%;
            }
        }
    }
}


